<template>

 <div class="wrap" :style="{'height':wrap_height+'px','margin-top':commomheight*0.16+'px' }"  >
    <div class="_card" :style="{'height':item.height+contentHeight+'px'}" v-for="item in list" :key="item.id">
      <son :_src="item.src" :_word="item.word" :_love="item.loveNum" :_divheight="item.height"></son>
    </div>
    <section id="fenge"></section> 
 </div>
<button v-show="showbtn" @click="backtoTop">》</button>
</template>
<script setup>

import {ref,reactive, nextTick} from 'vue'
import { random_all } from "../api/index";
    import son from "./son.vue";
    let cards;
    let observer;
    let list=reactive([]);
    let wrap_height=ref(600);
    let showbtn=ref(false);
    let col_height=[0,0]; 
    const commomheight=document.body.clientHeight;
    const comomwidth=document.body.clientWidth;
    let imgMinheight=Math.floor(commomheight*0.33*0.6);
    let imgMaxheight=Math.floor(commomheight*0.45*0.6);
    let contentHeight=Math.floor(commomheight*0.35*0.4);
    let imgWidth=Math.floor((comomwidth>500?600:comomwidth)*0.49);
    addcard();
    async function addcard(){
        try {
              let imgarr= await random_all(imgMaxheight,imgMinheight,imgWidth);
              for(let i=0;i<imgarr.length;i++){
                if(i%2==0){
                col_height[0]+=(imgarr[i].height+contentHeight);
                }
                if(i%2==1){
                  col_height[1]+=(imgarr[i].height+contentHeight);
                }
              }
              
              wrap_height.value=Math.max(...col_height)+10;            
              list.push(...imgarr);
              if(document.documentElement.scrollTop>=1500){
                showbtn.value=true;
              }
              nextTick(()=>{
                cards= Array.prototype.slice.call(document.querySelectorAll("._card"));
                  ob(cards[cards.length-1]);
                  cards=null;
              })
        } catch (error) {
            console.log(error);
        }
   
    }
    
    function ob(card) {
        if (!observer) {
            observer = new IntersectionObserver(entries => {
                if (entries.length === 1 && entries[0].isIntersecting) {
                  observer.unobserve(entries[0].target);               
                    addcard(); 
                }
            })
        }
        observer.observe(card);
      }
    function backtoTop(){
      showbtn.value=false;
      let step=document.documentElement.scrollTop;
      let timer=setInterval(()=>{
        if(document.documentElement.scrollTop<=0){
          clearInterval(timer);  
        }
        document.documentElement.scrollTop-=Math.floor(step/10);
      },50)
    }        


</script>
<style scoped>
.wrap{
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
 button{
  width: 2.5rem;
  height: 2.5rem;
  transform: rotate(-90deg);
  position: fixed;
  bottom: 5rem;
  right: 0px;
  background-color:rgba(241, 59, 32, 0.855);
}
.wrap div:nth-child(2n+1){
  order: 1;
}
.wrap div:nth-child(2n+2){
  order: 2;
}
#fenge{
  order: 1;
  flex-basis: 100%;
  width: 1%;
  background-color:transparent;
}
._card{
  width: 49%;
  background-color: greenyellow;
  overflow: hidden;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 1px;
}

</style>